<template>
  <div :class="`${prefixCls}-container`">
    <okUploadTable
      :fileList="value"
      v-bind="bindProps"
      :update="handleUpdate"
      :theme="appTheme"
      :formatUploadData="formatUploadData"
      :customRemovePromise="customRemovePromise"
      :customDisplayList="customDisplayList"
    />
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive, computed, inject, unref } from 'vue';
  import { propTypes } from '/@/utils/propTypes';
  import { useAttrs } from '/@/hooks/core/useAttrs';
  import { useDesign } from '/@/hooks/web/useDesign';
  import { UploadTypeEnum } from './JUpload/upload.data';
  import { uploadFileUrl } from '/@/api/common/api';
  import { okUploadTable } from '@byteluck/ok-wc-ui';
  import { useFile } from '../hooks/useFile';
  const appTheme = inject('appTheme');
  const { prefixCls } = useDesign('j-upload');
  const attrs = useAttrs();
  const emit = defineEmits(['change', 'update:value']);
  const props = defineProps({
    value: propTypes.oneOfType([propTypes.string, propTypes.array]),
    text: propTypes.string.def('上传'),
    fileType: propTypes.string.def(UploadTypeEnum.all),
    /*这个属性用于控制文件上传的业务路径*/
    bizPath: propTypes.string.def(''),
    /**
     * 是否返回url，
     * true：仅返回url
     * false：返回fileName filePath fileSize
     */
    // returnUrl: propTypes.bool.def(true),
    // 最大上传数量
    maxCount: propTypes.number.def(0),
    // buttonVisible: propTypes.bool.def(true),
    multiple: propTypes.bool.def(true),
    // 是否显示左右移动按钮
    // mover: propTypes.bool.def(true),
    // 是否显示下载按钮
    download: propTypes.bool.def(true),
    // 删除时是否显示确认框
    // removeConfirm: propTypes.bool.def(false),
    beforeUpload: propTypes.func,
    disabled: propTypes.bool.def(false),
    // 替换前一个文件，用于超出最大数量依然允许上传
    // replaceLastOne: propTypes.bool.def(false),
  });

  // 当前是否是上传图片模式
  const isImageMode = computed(() => props.fileType === UploadTypeEnum.image);
  const dirIds = computed(() => (props.value?.length ? ((props.value?.[0] || '') as string)?.split('/')?.[0] : generateDir()));
  const { formatUploadData, handleUpdate, customRemovePromise, customDisplayList, generateDir } = useFile(emit, 'file');

  // 合并 props 和 attrs
  const bindProps = computed(() => {
    //update-begin-author:liusq date:20220411 for: [issue/455]上传组件传入accept限制上传文件类型无效
    const bind: any = Object.assign({}, props, unref(attrs));
    //update-end-author:liusq date:20220411 for: [issue/455]上传组件传入accept限制上传文件类型无效

    bind.action = uploadFileUrl;
    bind.name = 'file';
    bind.listType = isImageMode.value ? 'picture-card' : 'text';
    bind.class = [bind.class, { 'upload-disabled': props.disabled }];
    bind.data = { dir: unref(dirIds) };

    // 如果当前是图片上传模式，就只能上传图片
    if (isImageMode.value && !bind.accept) {
      bind.accept = 'image/*';
    }

    let operation = ['preview', 'download', 'remove'];
    if (!bind.download) {
      operation = ['preview', 'remove'];
    }
    bind.operation = operation;
    return bind;
  });
</script>

<style lang="less">
  @prefix-cls: ~'@{namespace}-j-upload';

  .@{prefix-cls} {
  }
</style>
